<template>
	<div class="panel">
		<div class="search">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-input
            v-model="search.pointName"
            size="mini"
            clearable
            placeholder="模糊搜索点位名称"
          ></el-input>
        </el-col>
      </el-row>
			<div style="margin-top:10px">
				<el-button
					type="primary"
					size="mini"
					@click="$emit('search',search)"
				>搜索</el-button>
				<el-button
					type="primary"
					size="mini"
					@click="$emit('add')"
				>新增</el-button>
			</div>
		</div>
		<div class="list">
			<div
				class="item"
				v-for="(item,index) of list"
				:key="index"
			>
        <div class="pos">{{"点位ID："+item.pointId}}</div>
				<div class="top">
					<div class="name pointName" @click="moveToCenter(item)" title="点击定位到该传感器">{{"点位名称："+item.pointName}}</div>
					<div class="btns">
						<el-button
							type="text"
							size="mini"
							@click="$emit('edit',item)"
							v-hasPermi="['slope:point:edit']"
						>编辑</el-button>
            <el-button
              type="text"
              size="mini"
              @click="$emit('del',item)"
			  v-hasPermi="['slope:point:remove']"
            >删除</el-button>
						<el-button
              v-if="item.isValid"
							type="text"
							size="mini"
							@click="$emit('disable',item)"
						>禁用</el-button>
            <el-button
              v-if="!item.isValid"
              type="text"
              size="mini"
              @click="$emit('enable',item)"
            >启用</el-button>
					</div>
				</div>
				<div class="pos">{{"点位位置："+lonlat(item)}}</div>
			</div>
		</div>
	</div>
</template>

<script>
  import { XdhMap } from "xdh-map";

  export default {
		name: "panel",
		components: {
      XdhMap
    },
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				search: {},
			};
		},
		watch: {},
		computed: {},
		methods: {
      lonlat(item){
        return (item.lon>0?"E":"W")+item.lon.toFixed(6)+"°,"+(item.lat>0?"N":"S")+item.lat.toFixed(6)+"°";
      },
      moveToCenter(e){
        let coordinate = [];
        coordinate.push(e.lon);
        coordinate.push(e.lat);
        this.moveTo(coordinate);
      },
      moveTo: function moveTo(loc) {
        debugger;
        var view = this.$parent.olMap.getView();
        return new Promise(function (resolve, reject) {
          view.animate({
            center: loc,
            zoom:18
          }, function () {
            resolve(view);
          });
        });
      },


		},
		created() {
			//this.getData()
		},
		mounted() {}
	};
</script>
<style lang="scss" scoped>
	@import "~@/assets/styles/mixin.scss";
	@import "~@/assets/styles/variables.scss";
	.panel {
		position: absolute;
		z-index: 90;
		left: 12px;
		top: 12px;
		bottom: 12px;
		padding: 14px;
		background-color: #fff;
		width: 285px;
		border: 1px solid #eee;
		border-radius: 4px;
		.list {
			height: calc(100% - 65px);
			padding-top: 12px;
			overflow-y: auto;
			.item {
				font-size: 12px;
				color: #323232;
				border-bottom: 1px solid #eee;
				padding: 5px 5px;
      }
			.pos {
				@include ellipsis;
			}
			.top {
				@include flex(space-between, center);
				.name {
					@include grow;
					@include ellipsis;
          cursor: pointer;

        }
				.btns {
					@include shrink;
				}
			}
		}
	}
</style>
